<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<p style="text-transform: uppercase;">
			text-transform:文本转换成大写
			text-transform: uppercase;<br/>
			aaaaaaaaabbbbbbbccccc
		</p>
		<p style="text-transform: lowercase;">
			text-transform:文本转换成小写
			text-transform: lowercase;<br/>
			AAAAAAAAAABBBBBBBBCCCCCC
		</p>
		<p style="text-transform:capitalize;">
			text-transform:文本转换成首字母大写
			text-transform: capitalize;<br/>
			AAAAAAAAAABBBBBBBBCCCCCC
		</p>
		<hr/>
		<p class="pfont">
			文字描述 text-decoration<br />
			<span style="text-decoration: none;">none:没有修饰</span><br />
			<span style="text-decoration: blink;">blink:闪烁</span><br />
			<span style="text-decoration:underline">underline:底边线</span><br />
			<span style="text-decoration:line-through">line-through:删除线</span>	<br />
			<span style="text-decoration:overline">overline:上边线</span><br />
		</p>
		<hr />
		<p style="letter-spacing:10px">
			字间距：letter-spacing
		</p>
		<p style="word-spacing:20px">
			词间距：word-spacing hello word 
		</p>
		<hr />
		
		<p style="width: 500px; height:180px; border: 1px solid red;layout-flow:vertical-ideographic">
			文本流控制：layout-flow:vertical-ideographic
			该属性 兼容性差  不建议使用 只针对IE浏览器有效，并且是5+以上得浏览器
			竖直排列，
			8984094888888875555ggggggg
			gggggggggggggggggggggggg
		</p>
		<p style="width: 500px; height:180px; border: 1px solid red;layout-flow:horizontal;">
			文本流控制：layout-flow:horizontal
			水平排列
			8984094888888875555ggggggggggggggggggggg
			ggggggggrrr5555555555555555555gfhgfgg
			ggggggggggggggggggggggggggggg
		</p>
		
		<hr/>
		
		<p style=" white-space:nowrap ;">
			 空余空间 
			white-space:nowrap 所有内容在一行上
			guiffghkllllllllll   lllllllllllfrfreer
		</p>
		<p style=" white-space:pre ;">
			white-space:pre   写的和代码得换行以及空白一致
			guiffghkllllllllll       lllllllllllfrfreer
		</p>
		<p style=" white-space:pre-line;">
			white-space:pre-line    保留换行，但是合并空白处
			guiffghkllllllllll       lllllllllllfrfreer
		</p>
		<p style=" white-space:pre-wrap;">
			white-space:pre-wrap    和pre类似，保留换行，保留空格
			guiffghkllllllllll       lllllllllllfrfreer
		</p>
		
		<hr/>
		<p style="width:100px;word-break: break-all;">
			word-break:文本换行位置<br/>
			word-break:break-all遇到边界就换行
			hello hello hello hello hello
			 hello hello hello
		</p>
		<p style="width:100px;word-break: keep-all;">
			word-break:文本换行位置<br/>
			word-break:keep-all遇到空格或连字符时换行
			hello hello he?llo hello hello
			 hello hello hel lo
		</p>
		<p style="width:100px;word-break:break-word;">
			word-break:文本换行位置<br/>
			word-break:break-word 自动换行 有兼容性  ie不识别
			hello hello hello hello hello
			 hello hello hel lo
		</p>
		<p style="white-space: pre-line;">
			块级元素和行内元素  浮动之后都变成行内块元素
			比如：a标签溢出显示省略号
			width:100px;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:wrap;
			此时，这么写 超出部分并不会产生省略号，因为a是行内标签，设置得宽度不起作用
			而溢出部分显示省略号就要求必须设置宽度。
			那么，此时，
			可以设置 display:inline-block;
			也可设置 float:left
		</p>
		<p>
			<a href="#" style="width: 100px; overflow: hidden; text-overflow: ellipsis;display: inline-block;">6r98fgiufhfhjlf7e579705t</a><br />
			<a href="#" style="width: 100px; overflow: hidden; text-overflow: ellipsis;float: left;">6r98fgiufhfhjlf7e579705t</a>
		</p>
	</body>
</html>
